<template>
  <div class="PartRlevant">
    <div class="header">
      <i class="icon"></i>
      <span class="title">同类商品推荐</span>
    </div>
      <div class="content">
        <ul class="listBox">
          <li :class="index==0?'active item':'item'">
            <router-link to="">
              <img width="190" height="190" src="https://yanxuan-item.nosdn.127.net/f8c37ffa41ab1eb84bff499e1f6acfc7.jpg" alt="">
              <p class="txt">梨皮朱泥三绝清代小</p>
              <p class="price">￥76.00</p>
            </router-link>
            <router-link to="">
              <img width="190" height="190" src="https://yanxuan-item.nosdn.127.net/fc03362c322e53beecaf9441ea97ffeb.jpg" alt="">
              <p class="txt">梨皮朱泥三绝清代小</p>
              <p class="price">￥76.00</p>
            </router-link>
            <router-link to="">
              <img width="190" height="190" src="https://yanxuan-item.nosdn.127.net/7c53ac93faea707275d0760bd91d1dc7.png" alt="">
              <p class="txt">梨皮朱泥三绝清代小</p>
              <p class="price">￥76.00</p>
            </router-link>
            <router-link to="">
              <img width="190" height="190" src="	https://yanxuan-item.nosdn.127.net/1661541f80bc9776e64125b7d586c9e6.jpg" alt="">
              <p class="txt">梨皮朱泥三绝清代小</p>
              <p class="price">￥76.00</p>
            </router-link>
          </li>
          <li :class="index==1?'active item':'item'">
            <router-link to="">
              <img width="190" height="190" src="https://yanxuan-item.nosdn.127.net/4605351c7b359f53d1fe4fe39a8a1999.png" alt="">
              <p class="txt">梨皮朱泥三绝清代小</p>
              <p class="price">￥76.00</p>
            </router-link>
            <router-link to="">
              <img width="190" height="190" src="https://yanxuan-item.nosdn.127.net/fc03362c322e53beecaf9441ea97ffeb.jpg" alt="">
              <p class="txt">梨皮朱泥三绝清代小</p>
              <p class="price">￥76.00</p>
            </router-link>
            <router-link to="">
              <img width="190" height="190" src="https://yanxuan-item.nosdn.127.net/7c53ac93faea707275d0760bd91d1dc7.png" alt="">
              <p class="txt">梨皮朱泥三绝清代小</p>
              <p class="price">￥76.00</p>
            </router-link>
            <router-link to="">
              <img width="190" height="190" src="	https://yanxuan-item.nosdn.127.net/1661541f80bc9776e64125b7d586c9e6.jpg" alt="">
              <p class="txt">梨皮朱泥三绝清代小</p>
              <p class="price">￥76.00</p>
            </router-link>
          </li>
          <li :class="index==2?'active item':'item'">
            <router-link to="">
              <img width="190" height="190" src="https://yanxuan-item.nosdn.127.net/f8c37ffa41ab1eb84bff499e1f6acfc7.jpg" alt="">
              <p class="txt">梨皮朱泥三绝清代小</p>
              <p class="price">￥76.00</p>
            </router-link>
            <router-link to="">
              <img width="190" height="190" src="https://yanxuan-item.nosdn.127.net/4605351c7b359f53d1fe4fe39a8a1999.png" alt="">
              <p class="txt">梨皮朱泥三绝清代小</p>
              <p class="price">￥76.00</p>
            </router-link>
            <router-link to="">
              <img width="190" height="190" src="https://yanxuan-item.nosdn.127.net/7c53ac93faea707275d0760bd91d1dc7.png" alt="">
              <p class="txt">梨皮朱泥三绝清代小</p>
              <p class="price">￥76.00</p>
            </router-link>
            <router-link to="">
              <img width="190" height="190" src="	https://yanxuan-item.nosdn.127.net/1661541f80bc9776e64125b7d586c9e6.jpg" alt="">
              <p class="txt">梨皮朱泥三绝清代小</p>
              <p class="price">￥76.00</p>
            </router-link>
          </li>
          <li :class="index==3?'active item':'item'">
            <router-link to="">
              <img width="190" height="190" src="https://yanxuan-item.nosdn.127.net/f8c37ffa41ab1eb84bff499e1f6acfc7.jpg" alt="">
              <p class="txt">梨皮朱泥三绝清代小</p>
              <p class="price">￥76.00</p>
            </router-link>
            <router-link to="">
              <img width="190" height="190" src="https://yanxuan-item.nosdn.127.net/fc03362c322e53beecaf9441ea97ffeb.jpg" alt="">
              <p class="txt">梨皮朱泥三绝清代小</p>
              <p class="price">￥76.00</p>
            </router-link>
            <router-link to="">
              <img width="190" height="190" src="https://yanxuan-item.nosdn.127.net/7c53ac93faea707275d0760bd91d1dc7.png" alt="">
              <p class="txt">梨皮朱泥三绝清代小</p>
              <p class="price">￥76.00</p>
            </router-link>
            <router-link to="">
              <img width="190" height="190" src="	https://yanxuan-item.nosdn.127.net/1661541f80bc9776e64125b7d586c9e6.jpg" alt="">
              <p class="txt">梨皮朱泥三绝清代小</p>
              <p class="price">￥76.00</p>
            </router-link>
          </li>
          <span class="last" @click="last"> < </span>
          <span class="next" @click="next"> > </span>
        </ul>
        <ul class="dot">
          <li :class="index==0?'active':''"></li>
          <li :class="index==1?'active':''"></li>
          <li :class="index==2?'active':''"></li>
          <li :class="index==3?'active':''"></li>
        </ul>
      </div>
  </div>
</template>

<script>
export default {
  name: "PartRlevant",
  props:["list"],
  data(){
    return{
      index:0,
    }
  },
  methods:{
    last(){
      this.index= this.index-1<0?0:this.index-1;
    },
    next(){
      this.index= this.index+1>=3?3:this.index+1;
    }
  }
}
</script>

<style scoped lang="scss">
  .PartRlevant{
    margin: 20px auto;
    background: #fff;
    min-height: 460px;
    .header{
      height: 80px;
      line-height: 80px;
      padding: 0 20px;
      .icon{
        width: 16px;
        height: 16px;
        display: inline-block;
        border-top: 4px solid #27ba9b;
        border-right: 4px solid #27ba9b;
        box-sizing: border-box;
        position: relative;
        transform: rotate(45deg);
      }
      .icon:after{
        content: "";
        width: 10px;
        height: 10px;
        position: absolute;
        left: 0;
        top: 2px;
        background: #bcf1e6;
      }
      .title{
        font-size: 20px;
        padding-left: 10px;
        color:#333;
      }
    }
      .content{
        position:relative;
      .dot{
        width:100%;
        text-align:center;
        position:absolute;
        bottom:-60px;
        li:nth-child(1){
          margin:0;
        }
        li.active{
          background:#27BA9B;
        }
        li{
          display:inline-block;
          width:12px;
          height:12px;
          background:rgba(0,0,0,.2);
          border-radius:50%;
          margin-left:12px;
          router-link{
            width:240px;
            height:289px;
          }
        }
      }
      .listBox{
        width:1160px;
        height:290px;
        padding:0 40px;
        position:relative;
        .item{
          opacity:0;
          transition: .8s;
          width:1160px;
          background:#fff;
          display:flex;
          justify-content: space-around;
          align-items: center;
          position:absolute;
          top:0;
          img{
            padding:20px;
          }
          .txt{
            width:160px;
            height:22px;
            padding:0 40px;
            font-size:15px;
            color:#656565;
            text-align:center;
            line-height:22px;
          }
          .price{
            width:240px;
            height:22px;
            text-align:center;
            line-height:22px;
            font-size:16spx;
            color:#CE4443;
            margin-top:15px;
          }
        }
        li.active{
          opacity: 1;
        }
        .last{
          display:block;
          width:30px;
          height:30px;
          position: absolute;
          z-index:3;
          top:50%;
          left:25px;
          text-align: center;
          font-size: 30px;
          margin-top:-15px;
        }
        .next{
          display:block;
          width:30px;
          text-align: center;
          height:30px;
          font-size: 30px;
          position: absolute;
          z-index:3;
          top:50%;
          right:25px;
          margin-top:-15px;
        }
      }
    }
  }
</style>